import React from 'react';
import {Descriptions, Form, Input, Button, message} from 'antd';
import {API} from "@/services/typings";
import DateUtil from "@/utils/DateUtils";

interface BaseViewProps {
  user: API.CurrentUser;
  onUpdate: (values: API.CurrentUser) => void;
}

const BaseView: React.FC<BaseViewProps> = ({user, onUpdate}) => {
  const [form] = Form.useForm();

  const handleFinish = async (values: API.CurrentUser) => {
    try {
      onUpdate(values);
    } catch (error) {
      message.error('更新基本信息失败');
    }
  };

  return (
    <Form
      layout="vertical"
      form={form}
      initialValues={user}
      onFinish={handleFinish}
    >
      <Descriptions column={2} bordered>
        <Descriptions.Item label="用户名" span={2}>
          <Form.Item name="username" noStyle>
            <Input disabled/>
          </Form.Item>
        </Descriptions.Item>

        <Descriptions.Item label="姓名">
          <Form.Item name="name" noStyle>
            <Input/>
          </Form.Item>
        </Descriptions.Item>

        <Descriptions.Item label="昵称">
          <Form.Item name="nickname" noStyle>
            <Input/>
          </Form.Item>
        </Descriptions.Item>

        <Descriptions.Item label="手机号">
          <Form.Item
            name="phone"
            rules={[
              {
                pattern: /^1[3-9]\d{9}$/,
                message: '请输入正确的手机号',
              },
            ]}
            noStyle
          >
            <Input/>
          </Form.Item>
        </Descriptions.Item>

        <Descriptions.Item label="注册日期" span={2}>
          {DateUtil.formatDateNotException(user?.registerDate || '')}
        </Descriptions.Item>
      </Descriptions>

      <div style={{marginTop: 16, textAlign: 'center'}}>
        <Button type="primary" htmlType="submit">
          更新基本信息
        </Button>
      </div>
    </Form>
  );
};

export default BaseView;
